import React, { memo } from "react";
import Styles from "./index.module.less";

const ListData = [
  {
    title: "机房",
    children: [
      {
        title: "主机",
      },
    ],
  },
  {
    title: "网络",
    children: [
      {
        title: "cdn",
      },
      {
        title: "主域名",
      },
    ],
  },
  {
    title: "前台",
    children: [
      {
        title: "静态资源",
      },
      {
        title: "接口响应",
      },
      {
        title: "js报错",
      },
    ],
  },
  {
    title: "主要页面",
    children: [
      {
        title: "页面监控",
      },
    ],
  },
];

function ListComponent() {
  return (
    <div className={Styles["globalList"]}>
      {ListData.map((data, index) => {
        return (
          <div key={`list-${index}`}>
            <p className={Styles["listp"]}>{data.title}</p>
            {data.children &&
              data.children.map((item, index2) => {
                return (
                  <div className={Styles["listItem"]} key={`child-${index2}`}>
                    {item.title}
                  </div>
                );
              })}
          </div>
        );
      })}
    </div>
  );
}

export default memo(ListComponent);
